<template>
  <div id="home">
    <img src="../../../static/home.jpg" width="100%" height="150">
    <div id="authbotton" class="bg-color-white display-flex">
      <div @click="view(1)" v-if="auth.find(item => item.url === 'rcdc') || auth.find(item => item.url === 'rhdc') || auth.find(item => item.url === 'sgls') || auth.find(item => item.url === 'wtqd')">
        <i class="fa fa-pencil-square-o fa-3x text-color-red"></i>
        <br>入录
      </div>
      <div @click="view(0)">
        <i class="fa fa-file-text-o fa-3x text-color-blue"></i>
        <br>查看
      </div>
      <div @click="$f7.views.main.router.navigate('/backlog')">
        <i class="fa fa-tasks fa-3x text-color-pink"></i>
        <br>待办
      </div>
      <div v-if="auth.find(item => item.url === 'fxtj')" @click="$f7.views.main.router.navigate('/analysis')">
        <i class="fa fa-pie-chart fa-3x text-color-yellow"></i>
        <br>分析统计
      </div>
      <div @click="laws">
        <i class="fa fa-book fa-3x text-color-orange"></i>
        <br>法律法规
      </div>
    </div>
    <f7-list bg-color="white" class="no-margin">
      <f7-list-item group-title>扶贫要闻</f7-list-item>
      <f7-list-button color="black" @click="opennew(n)" v-for="n in news" :key="n.id">{{n.name}}</f7-list-button>
    </f7-list>
  </div>
</template>
<script>
import { f7List, f7ListItem, f7ListButton } from 'framework7-vue'
import { mapState } from 'vuex'
export default {
  components: {
    f7List,
    f7ListItem,
    f7ListButton
  },
  computed: {
    ...mapState({
      auth: state => state.user.auth
    })
  },
  data() {
    return {
      news: []
    }
  },
  async created() {
    this.$root.$off('destroy-index').$on('destroy-index', () => {
      this.$destroy()
    })
    const { data } = await this.request('/getnews', { type: 0, commend: 1 }, false)
    this.news = data
  },
  methods: {
    opennew({ id, url }) {
      this.$f7.views.main.router.navigate('/browse', { context: url || `${window.baseUrl}/getnew?id=${id}` })
    },
    laws() {
      this.$f7.views.main.router.navigate('/new', { context: 1 })
    },
    view(type) {
      this.$f7.views.main.router.navigate('/selectview', { context: type })
    }
  }
}
</script>
<style>
#authbotton {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

#authbotton>div {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  text-align: center;
  padding: 15px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#authbotton>div:active {
  background-color: #d6d6d6;
}

#home .list-button {
  height: 35px;
  line-height: 35px;
}
</style>